<template>
  <div class="app-container">
    <!-- 加载中提示 -->
    <el-spin v-if="loading" tip="数据加载中..." style="font-size: 16px;"></el-spin>

    <!-- 整体布局容器，采用flex布局实现三分栏效果 -->
    <div class="layout-container" style="display: flex; height: 100vh;">
      <!-- 左侧部分 -->
      <div class="left-section module white-bg"
           style="width: 16%; height: 1000x; overflow-y: auto; background-color: white; ">
        <!-- 这里可以放置左侧部分具体内容，例如一些导航链接、侧边栏信息等 -->
        <p style="font-weight: bold; font-size: 22px; margin-left: 15px;">查房记录</p>
        <el-form ref="form" :model="wardroundsList" class="no-border-form" style="width: 100%;">
          <el-form-item class="e-f-i-t-1" style="display: flex; align-items: center; margin-bottom: 0;">
						<span
              style="font-weight: bold; font-size: 18px; margin-left: 25px;">{{ queryParams.creatTime }}</span><br />
            <span style="font-weight: bold; font-size: 18px; margin-left: 25px;">初次住院</span><br />
          </el-form-item>
          <div v-for="(wardround, index) in wardroundsList" :key="index" class="wardround-item">
            <el-button size="mini" style="height: 100px;" type="text" @click="goToDetails(wardround)">
              <el-form-item style="display: flex; align-items: center; margin-top: 15px;">
								<span
                  style="font-weight: bold; font-size: 18px; margin-left: 25px; color: black;">{{ wardround.creatTime }}</span><br />
                <span
                  style="font-weight: bold; font-size: 18px; margin-left: 25px; color: black;">第{{ wardround.number }}次查房</span><br />
              </el-form-item>
            </el-button>
          </div>
        </el-form>
      </div>

      <!-- 右侧部分，采用flex布局分为上下两部分 -->
      <div class="right-section module white-bg" style="flex: 1; display: flex; flex-direction: column;">
        <!-- 右上部分，放置原有的Vue代码对应的表单内容 -->
        <div class="top-right-section module white-bg" style="padding: 10px; background-color: white;">
          <p style="font-weight: bold; font-size: 20px;">患者信息</p>
          <div class="w-h-title-div" @click="successwz">← 返回</div>
          <el-form ref="form" :model="patientList" label-width="80px" class="no-border-form">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="就诊姓名" style="font-size: 16px;">
                  <el-input v-model="patientList.name" size="small" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="就诊性别" style="font-size: 16px;">
                  <el-select v-model="patientList.sex" placeholder="请选择性别" disabled>
                    <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value"
                               :label="dict.label" :value="dict.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="手机号码" style="font-size: 16px;">
                  <el-input v-model="patientList.phone" size="small" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="所属民族" style="font-size: 16px;">
                  <el-select v-model="patientList.nation" disabled>
                    <el-option v-for="dict in dict.type.people_ethnic_ffiliation" :key="dict.value"
                               :label="dict.label" :value="dict.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="身份证号" style="font-size: 16px;">
                  <el-input v-model="patientList.identityCard" size="small" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="就诊年龄" style="font-size: 16px;">
                  <el-input v-model="patientList.age" size="small" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="医保性质" style="font-size: 16px;">
                  <el-select v-model="patientList.nature" disabled>
                    <el-option v-for="dict in dict.type.patient_medical_status" :key="dict.value"
                               :label="dict.label" :value="dict.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="医保卡号" style="font-size: 16px;">
                  <el-input v-model="patientList.cardnumber" size="small" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="床位编号" style="font-size: 16px;">
                  <el-input v-model="wardList.bedspace" size="small" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="入院病因" style="font-size: 16px;">
                  <el-input v-model="queryParams.disease" size="small" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <!-- 右下部分，可后续添加对应内容，比如详情展示等 -->

        <div class="bottom-right-section module white-bg"
             style="flex: 1; padding: 10px; background-color: white;">
          <p style="font-weight: bold; font-size: 20px;">查房详情</p>
          <div v-if="!firstWardround.number">
            <el-form ref="form" :model="firstWardround" label-width="80px" class="no-border-form">
              <el-row :gutter="20">
                <el-col :span="6">
					<el-form-item label="发病日期" style="font-size: 16px;">
					  <el-date-picker
					    clearable
						size="small"
					    v-model="firstWardround.creatTime"
					    type="date"
					    value-format="yyyy-MM-dd"
					    placeholder="选择日期"
					    :picker-options="pickerOptions0"
						style="width: 100%"
					  />
					</el-form-item>

                </el-col>
                <el-col :span="6">
                  <el-form-item label="检查医生" style="font-size: 16px;">
                    <el-select v-model="firstWardround.doctorId" placeholder="请选择医生">
                      <el-option v-for="(doctorName, doctorId) in doctorvalue" :key="doctorId"
                                 :label="doctorName" :value="doctorId">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="体温" style="font-size: 16px;">
                    <el-input style="width: 100px;" v-model="firstWardround.bodytemperature"
                              size="small"></el-input>
                    <span style="margin-left: 5px;">°C</span>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="心率" style="font-size: 16px;">
                    <el-input style="width: 100px;" v-model="firstWardround.heartrate"
                              size="small"></el-input>
                    <span style="margin - left: 5px;">次/分</span>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="血压" style="font-size: 16px;">
                    <el-input style="width: 50px;" v-model="firstWardround.lowpressure"
                              size="small"></el-input>/
                    <el-input style="width: 50px;" v-model="firstWardround.highpressure"
                              size="small"></el-input>
                    <span style="margin-left: 5px;">mmHg</span>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="呼吸" style="font-size: 16px;">
                    <el-input style="width: 100px;" v-model="firstWardround.breathe"
                              size="small"></el-input>
                    <span style="margin-left: 5px;">次/分</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="患者情况" style="font-size: 16px;">
                <el-input v-model="firstWardround.situation" type="textarea" placeholder="请输入患者情况"
                          :rows="4"></el-input>
              </el-form-item>

              <el-form-item label="查房备注" style="font-size: 16px;">
                <el-input v-model="firstWardround.notes" type="textarea" placeholder="请输入查房备注"
                          :rows="4"></el-input>
              </el-form-item>
            </el-form>
            <el-button type="primary" @click="addward" style="margin-left: 80px;">新增</el-button>
          </div>

          <div v-else>
            <el-form ref="form" :model="firstWardround" label-width="80px" class="no-border-form">
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="发病日期" style="font-size: 16px;">
                    <el-input v-model="firstWardround.creatTime" size="small" readonly></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="检查医生" style="font-size: 16px;">
                    <el-input v-model="doctorList.name" size="small" readonly></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="体温" style="font-size: 16px;">
                    <el-input style="width: 100px;" v-model="firstWardround.bodytemperature"
                              size="small" readonly></el-input>
                    <span style="margin-left: 5px;">°C</span>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="心率" style="font-size: 16px;">
                    <el-input style="width: 100px;" v-model="firstWardround.heartrate" size="small"
                              readonly></el-input>
                    <span style="margin - left: 5px;">次/分</span>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="血压" style="font-size: 16px;">
                    <el-input style="width: 50px;" v-model="firstWardround.lowpressure" size="small"
                              readonly></el-input>/
                    <el-input style="width: 50px;" v-model="firstWardround.highpressure"
                              size="small" readonly></el-input>
                    <span style="margin-left: 5px;">mmHg</span>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="呼吸" style="font-size: 16px;">
                    <el-input style="width: 100px;" v-model="firstWardround.breathe" size="small"
                              readonly></el-input>
                    <span style="margin-left: 5px;">次/分</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="患者情况" style="font-size: 16px;">
								<span
                  style="display: inline-block; height: 100px; width: 100%; border: 1px solid lightgrey; padding: 5px; border-radius: 5px;">
									{{ firstWardround.situation }}
								</span>
              </el-form-item>
              <el-form-item label="查房备注" style="font-size: 16px;">
								<span
                  style="display: inline-block; height: 100px; width: 100%; border: 1px solid lightgrey; padding: 5px; border-radius: 5px;">
									{{ firstWardround.notes }}
								</span>
              </el-form-item>
            </el-form>
            <el-button type="primary" @click="goBackToList"
                       style="margin-top: 10px; margin-left: 80px;">返回列表</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  listDoctor,
  getDoctor
} from "@/api/doctor/doctor";
import {
  getYuyue
} from "@/api/register/yuyue";
import {
  getWard
} from "@/api/ward/ward";
import {
  listWardrounds,
  getWardrounds,
  addWardrounds
} from "@/api/wardrounds/wardrounds";
import {
  number
} from "echarts";


export default {
  name: "Doctor",
  name: "Yuyue",
  name: "Ward",
  name: "Wardrounds",
  dicts: ['people_ethnic_ffiliation', 'patient_hospital_status', 'user_channel_status',
    'sys_user_sex', 'booking_status', 'patient_body_status', 'patient_medical_status'
  ],
  data() {
    return {
		pickerOptions0: {
		  disabledDate(time) {
		    return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
		  }
		},
      emptyField: "", // 确保每个文本框内容为空
      // 总条数
      total: 0,
      loading: true,
      wardList: {
        bedspace: "",
      },
      queryParams: {
        id: null,
        wardId: null,
        disease: null,
        creatTime: null
      },
      wardroundsList: [], // 改为数组
      wardstatusList: [],
      patientList: [],
      doctorList: {
        name: ""
      },
      firstWardround: {
        creatTime: "",
        bodytemperature: "",
        heartrate: "",
        lowpressure: "",
        highpressure: "",
        breathe: "",
        situation: "",
        notes: "",
        number: "",
        patientId: "",
        doctorId: ""
      },
      doctorvalue: [],


    };
  },
  created() {
    const id = this.$route.params.id;
    console.log("患者id:", id);
    this.queryParams.id = id;
    const wardId = this.$route.params.wardId;
    // 最大值加一，赋值给 firstWardround.number
    console.log("查询ID:", wardId);
    this.queryParams.wardId = wardId;
    const disease = this.$route.params.disease;
    console.log("查询ID:", disease);
    this.queryParams.disease = disease;
    const creatTime = this.$route.params.creatTime;
    console.log("住院时间:", creatTime);
    this.queryParams.creatTime = creatTime;
    this.getInfoData();
    this.getData();
    this.getList();
    // this.getDoctor();
    this.getDoctorList();
  },
  methods: {

    //返回跳转
    successwz(){
    //页面跳转
    this.$router.push({
        path:'/patient/details'})
    },


    //新增事件
    addward() {
      // 先获取当前已有的查房记录列表里number的最大值
      let maxNumber = 0;
      if (this.wardroundsList.length > 0) {
        // 遍历查找最大值
        this.wardroundsList.forEach(item => {
          let currentNumber = parseInt(item.number, 10); // 将number转换为数字
          if (currentNumber > maxNumber) {
            maxNumber = currentNumber;
          }
        });
      }
      // 现在maxNumber是数字类型，加1后赋值给firstWardround.number
      this.firstWardround.number = maxNumber + 1;
      this.firstWardround.patientId = this.queryParams.id;
      console.log("hsfjdgbui::" + this.firstWardround.patientId);

      // 验证住院时间和医生是否为空
      if (!this.firstWardround.creatTime) {
        this.$message.error('住院时间不能为空');
        this.goBackToList();
        return;
      }
      if (!this.firstWardround.doctorId) {
        this.$message.error('医生不能为空');
        this.goBackToList();
        return;
      }

      addWardrounds(this.firstWardround).then(response => {
        this.$modal.msgSuccess("新增成功");
        this.getList();
        this.goBackToList();
      });
    },
    goBackToList() {
      // 将 firstWardround 的关键属性重置为空，模拟返回列表时数据清空的状态
      this.firstWardround = {
        creatTime: "",
        bodytemperature: "",
        heartrate: "",
        highpressure: "",
        lowpressure: "",
        breathe: "",
        situation: "",
        notes: "",
        number: "",
        patientId: "",
        doctorId: ""
      };
      this.doctorList = {
        name: ""
      }
    },
    // 查询医生列表
    getDoctorList() {
      listDoctor().then(response => {
        for (var i = 0; i < response.rows.length; i++) {
          this.$set(this.doctorvalue, response.rows[i].id, response.rows[i].name);
        }
        console.log("所有医生信息：" + this.doctorvalue);
      });
    },
    // 获取预约医生信息
    getDoctor(doctorId) {
      const params = {
        id: doctorId // 传递医生ID
      };
      console.log("jftcu" + doctorId);
      getDoctor(doctorId).then(response => {
        if (response && response.data) {
          this.doctorList = response.data;
          console.log("医生数据:", this.doctorList);
        }
      })
    },
    goToDetails(wardround) {
      const params = {
        patientId: this.$route.params.id,
        number: wardround.number
      };
      listWardrounds(params).then(response => {
        this.wardstatusList = response.rows;
        if (this.wardstatusList && this.wardstatusList.length > 0) {
          const firstWardround = this.wardstatusList[0]; // 取出第一个元素作为对象
          this.firstWardround = firstWardround
          console.log("firstWardround：", firstWardround);
          console.log("Notes：", firstWardround.notes);
          console.log("医生id：" + firstWardround.doctorId);
          // 调用 getDoctor 方法并传递医生 id
          const doctorId = firstWardround.doctorId;
          this.getDoctor(doctorId); // 传递医生id
        }
      });
    },
    //获取查房信息
    getList() {
      this.loading = true;
      const params = {
        patientId: this.$route.params.id
      };
      listWardrounds(params).then(response => {
        this.wardroundsList = response.rows;
        console.log(this.wardroundsList)
        this.total = response.total;
        console.log("总条数" + this.total)
        this.loading = false;
      });
    },
    //患者信息
    getInfoData() {
      getYuyue(this.queryParams.id).then(response => {
        if (response && response.data) {
          this.patientList = response.data;
          console.log("预约数据:", this.patientList);
        }
      });
    },
    //获取床位信息
    getData() {
      getWard(this.queryParams.wardId).then(response => {
        if (response && response.data) {
          this.wardList = response.data;
          console.log("数据:", this.wardList);
        }
      })
    },
  },
};
</script>

<style scoped>
/* 整体布局容器样式 */
.layout-container {
  display: flex;
  background-color: lightgray;
}

/* 左侧部分样式 */
.left-section {
  width: 15%;
  padding: 10px;
  margin-left: 1px;
  margin-top: 1px;
  /* 可以添加内边距让内容看起来更舒适 */
}

/* 定义模块通用类，设置白色背景和红色边框 */
.module {

  background-color: lightgray;
  box-sizing: border-box;
  /* 确保边框不额外占据空间，避免布局变化 */
}

/* 右侧部分样式 */
.right-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-left: 8px;
  margin-top: 1px;
}

/* 右上部分样式 */
.top-right-section {
  padding: 10px;
}

/* 右下部分样式 */
.bottom-right-section {
  flex: 1;
  padding: 10px;
  margin-top: 10px;
}


.e-f-i-t-1{
  border-bottom: 1px solid #000;
}

.wardround-item{
  border-bottom: 1px solid #000;

}

.wardround-item:hover{
    box-shadow: 0px 0px 5px 2px rgb(199, 201, 217);
}


.w-h-title-div{
  width: 100px;
  background-color: #ea9d9d;
  text-align: center;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  color: #ffffff;
  margin-bottom: 10px;
}


</style>
